<template>
  <van-popup v-model="showCarTextFlag" @close="handleClose" position="center" class="edit-text-container2"
    :overlay-style="{
      background: 'rgba(0, 0, 0, .8)'
    }">
    <!-- <div class="edit-text-content">
      
      <van-field v-model="text" label="" size="large" label-width="0" placeholder="请输入您的车牌" class="text-field"
        :clearable="true" />
    </div> -->

    <div class="keyboard">

      <div class="title-content">编辑车牌</div>

      <div class="input-box">
        <li :class="{
          activeNum: !first
        }">{{ first }}</li>
        <li :class="{
          activeNum: first && numArr.length === 0
        }">{{ numArr[0] }}</li>
        <li :class="{
          activeNum: first && numArr.length === 1
        }">{{ numArr[1] }}</li>
        <li :class="{
          activeNum: first && numArr.length === 2
        }">{{ numArr[2] }}</li>
        <li :class="{
          activeNum: first && numArr.length === 3
        }">{{ numArr[3] }}</li>
        <li :class="{
          activeNum: first && numArr.length === 4
        }">{{ numArr[4] }}</li>
        <li :class="{
          activeNum: first && numArr.length === 5
        }">{{ numArr[5] }}</li>
        <li :class="{
          activeNum: first && numArr.length === 6
        }">
          <span v-if="numArr[6]">{{ numArr[6] }}</span>
          <span v-else style="font-size: 8px;font-weight: 400;color: #78bb99;">新能源</span>
        </li>
      </div>
      <!-- 选择车牌号 首个汉字键盘 弹出层 -->
      <div v-if="show_chinese || !first" class="plate_number">
        <div class="plate_chinese_box">
          <!-- 点击对应的汉字，进行输入 -->
          <van-button size="small" v-for="(item, index) in ChineseList" :key="item.id" @click="checkChinese(index)"
            style="height: 30px;width: 11%;">{{ item.name }}</van-button>
        </div>
      </div>
      <!-- 英文 数字 键盘 -->
      <div v-else class="allBoard">
        <div class="plate_number_box">
          <!-- 点击对应的字母或数字，进行输入 -->
          <van-button size="small" v-for="(item, index) in English_Number" :key="item.id"
            @click="checkEnglish_num(index)" style="height: 30px;width: 8.5%;">{{ item.name }}</van-button>
        </div>
      </div>
    </div>

    <div class="btn-container">
      <van-button type="default" block style="margin-right: 12px;" @click="handleClose">关闭</van-button>
      <van-button type="info" block color="linear-gradient(to right, #8773f9, #1989fa)"
        @click="handleSaveCarText">确定</van-button>
    </div>
  </van-popup>
</template>

<script>
import pasterListData from '@/assets/utils/paster'
export default {

  data() {
    return {
      active: 0,
      text: '',
      pasterListData: pasterListData,
      showCarTextFlag: false,
      showKeyboard: true, // 车牌号输入框是否聚焦
      show_chinese: false, // 是否显示汉字键盘
      show_allBoard: false, // 是否显示英文数字键盘
      ChineseList: [
        { name: '京', id: 1 },
        { name: '津', id: 2 },
        { name: '冀', id: 3 },
        { name: '晋', id: 4 },
        { name: '蒙', id: 5 },
        { name: '辽', id: 6 },
        { name: '吉', id: 7 },
        { name: '黑', id: 8 },
        { name: '沪', id: 9 },
        { name: '苏', id: 10 },
        { name: '浙', id: 11 },
        { name: '皖', id: 12 },
        { name: '闽', id: 13 },
        { name: '赣', id: 14 },
        { name: '鲁', id: 15 },
        { name: '豫', id: 16 },
        { name: '鄂', id: 17 },
        { name: '湘', id: 18 },
        { name: '粤', id: 19 },
        { name: '桂', id: 20 },
        { name: '琼', id: 21 },
        { name: '渝', id: 22 },
        { name: '川', id: 23 },
        { name: '贵', id: 24 },
        { name: '云', id: 25 },
        { name: '藏', id: 26 },
        { name: '陕', id: 27 },
        { name: '甘', id: 28 },
        { name: '青', id: 29 },
        { name: '宁', id: 30 },
        { name: '新', id: 31 },
        { name: '←', id: 99 },
      ],
      English_Number: [
        { name: '1', id: 28 },
        { name: '2', id: 29 },
        { name: '3', id: 30 },
        { name: '4', id: 31 },
        { name: '5', id: 32 },
        { name: '6', id: 33 },
        { name: '7', id: 34 },
        { name: '8', id: 35 },
        { name: '9', id: 36 },
        { name: '0', id: 37 },
        { name: 'Q', id: 38 },
        { name: 'W', id: 39 },
        { name: 'E', id: 40 },
        { name: 'R', id: 41 },
        { name: 'T', id: 42 },
        { name: 'Y', id: 43 },
        { name: 'U', id: 44 },
        { name: 'I', id: 45 },
        { name: 'O', id: 46 },
        { name: 'P', id: 47 },
        { name: 'A', id: 48 },
        { name: 'S', id: 49 },
        { name: 'D', id: 50 },
        { name: 'F', id: 51 },
        { name: 'G', id: 52 },
        { name: 'H', id: 53 },
        { name: 'J', id: 54 },
        { name: 'K', id: 55 },
        { name: 'L', id: 56 },
        { name: 'Z', id: 57 },
        { name: 'X', id: 58 },
        { name: 'C', id: 59 },
        { name: 'V', id: 60 },
        { name: 'B', id: 61 },
        { name: 'N', id: 62 },
        { name: 'M', id: 63 },
        { name: '←', id: 99 },
      ],
      plate_number: '',   //车牌号
      first: '',
      numArr: [],
    };
  },

  watch: {
    '$store.state.design.currentSelectionType': {
      immediate: true,
      handler(val, oldVal) {
        const footerContainerEl = document.querySelector('#footer-container');
        if (val === 'carText') {
          footerContainerEl.style.zIndex = '999';
          this.showCarTextFlag = !this.showCarTextFlag;
        } else if (oldVal === 'carText') {
          this.showCarTextFlag = false;
        }
      }
    }
  },

  created() {
    console.log('激活activated');
    let carText = localStorage.getItem('carText');
    let numArr = [];
    if (carText) {
      this.first = carText.substring(0, 1);
      let carTextArr = carText.split('');
      carTextArr.forEach((item, index) => {
        if (index !== 0) {
          numArr.push(item);
        }
      });
    }
    this.numArr = numArr;
  },

  methods: {

    // 选择车牌号前面的汉字 
    checkChinese(index) {
      // 如果点击删除键，删除第一个格的内容
      if (this.ChineseList[index].id == 99) {
        this.first = ''
      } else {
        // 把选中的字赋值给第一个格，并且切换键盘
        this.first = this.ChineseList[index].name;
        this.show_chinese = false;
        this.show_allBoard = true;
      }
    },

    checkEnglish_num(index) {
      // 如果点击删除键，删除 numArr 的最后一个值
      if (this.English_Number[index].id == 99) {
        this.numArr.pop();
        // 如果 numArr 里面被删的没有值了，切换键盘
        if (this.numArr.length == 0) {
          this.show_chinese = true;
          this.show_allBoard = false;
        }
      } else {
        // 把选中的值 push 到 numArr 内
        this.numArr.push(this.English_Number[index].name)
        // 如果 numArr 中的值超过 7 个（车牌号的最大位数），删除最后一个
        if (this.numArr.length > 7) {
          this.numArr.pop();
        }
      }
    },

    // 确定变更车牌
    handleSaveCarText() {

      let first = this.first;
      let numArr = this.numArr;
      if (numArr && numArr.length > 5) {

        let numArrStr = first;
        numArr.forEach(item => {
          numArrStr = numArrStr + item;
        });

        this.handAccountCanvas.changeCarText(numArrStr).then(() => {
          this.handleClose();
          this.$toast({
            position: 'center',
            message: '设置成功',
            duration: 3 * 1000
          });

          localStorage.setItem('carText', numArrStr);

        });
      } else {
        this.$toast({
          position: 'center',
          message: '请输入您的车牌号码',
          duration: 3 * 1000
        });
      }
    },

    // 确定变更车牌
    handleSaveCarText2() {
      if (this.text) {
        let first = this.first;
        let numArr = this.numArr;
        let newText = this.text.toUpperCase();
        this.handAccountCanvas.changeCarText(newText).then(result => {
          this.handleClose();
          this.$toast({
            position: 'center',
            message: '设置成功',
            duration: 3 * 1000
          });

          localStorage.setItem('carText', this.text);

        });
      } else {
        this.$toast({
          position: 'center',
          message: '请输入您的车牌号码',
          duration: 3 * 1000
        });
      }
    },

    // 关闭弹窗
    handleClose() {
      this.showCarTextFlag = false;
      this.$emit('onClose', 'carText');
    },
  }
};
</script>

<style lang="less" scoped>
.background-container {
  height: 68vh;
  width: 100vw;
  padding-bottom: 68px;
  display: flex;
  flex-direction: column;

  .header-content {
    display: flex;
    width: 100vw;
    height: 58px;
    align-items: center;
    position: relative;

    &::before {
      display: block;
      content: '';
      position: absolute;
      bottom: 0;
      width: 200%;
      left: 0;
      border-bottom: 1px solid #eaeaea;
      transform: scale(0.5);
      transform-origin: left bottom;
    }
  }

  .tab-content {
    width: 280px;
  }

  .operation-content {
    display: flex;
    flex: 1;
    padding: 0 8px;
    justify-content: space-around;
    position: relative;

    &::before {
      display: block;
      content: "";
      height: 24px;
      width: 1px;
      background: #eaeaea;
      position: absolute;
      top: 0;
      left: 5px;
      bottom: 0;
      margin: auto;
    }

    .operation-icon {
      width: 20px;
      height: 20px;
      display: block;
    }
  }

  .image-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    padding: 0 12px 0 12px;
    display: flex;
    flex-direction: column;

    .image-item {
      margin-bottom: 12px;
    }

    .img-cover {
      width: 100%;
      background: #eaeaea;
    }
  }
}
</style>

<style lang="less">
.image-content {

  .van-tabs__wrap {
    width: 100%;
    height: 48px;

    .van-tab {
      padding: 0 4px;

      .van-tab__text {
        font-size: 12px;
        background: #eaeaea;
        height: 24px;
        line-height: 24px;
        padding: 0 12px;
        border-radius: 12px;
      }
    }

    .van-tab--active {

      .van-tab__text {
        background: #8da6ef;
        color: #fff;
      }
    }
  }

  .van-tabs__content {
    width: 100%;
    height: calc(100% - 48px);
    overflow-x: hidden;
    overflow-y: auto;
  }
}
</style>

<style scoped lang="less">
.keyboard {
  width: 100%;
}

// 车牌号 & 虚拟键盘
.input-box {
  width: 100%;
  height: 36px;
  margin: auto;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 6px 8px 0px rgba(96, 100, 112, 0.1);
  // border-radius: 4px;
  // border: 1px solid rgba(206, 208, 210, 1);
  margin: auto;
  display: flex;
  justify-content: space-between;

  li {
    width: 11%;
    border: 1px solid rgba(206, 208, 210, 1);
    box-sizing: border-box;
    margin-left: -1px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #323233;
    border-radius: 4px;
    font-weight: bold;
  }

  li:last-child {
    border: 1px solid #cdfae3;
    background-color: rgb(242, 253, 249);
  }

  li.activeNum{
    border-color: #1989fa;
  }
}

.class-close-box {
  width: 2rem;
  height: 1.5rem;
  position: absolute;
  right: 0.5rem;
  top: -1.3rem;
}

.class-close-box-div {
  width: 1rem;
  height: 1rem;
  font-size: 0.8rem;
  line-height: 1rem;
  margin: auto;
  text-align: center;
  border: 1px solid #666;
  border-radius: 50%;
}

.class-close-box-li {
  width: 1px;
  height: 0.5rem;
  background: #666;
  margin: auto;
}

.overflow-y {
  overflow-y: inherit;
}

.class-van-button-small {
  min-width: 0;
  border-radius: 5px;
  margin: 5px 2px;
  box-shadow: 5px 5px 5px #aaa;
}

.class-plate-box {
  width: 100%;
  padding: 0.7rem 0.5rem;
  box-sizing: border-box;
  background: #eaf1f9;
  position: relative;
}

.plate_number {
  .van-popup {
    overflow-y: inherit;
  }

  .van-popup--bottom {
    background: #eee;
  }

  .plate_chinese_box {
    width: 100%;
    padding: 6px;
    box-sizing: border-box;
    background: #eaf1f9;
    position: relative;
    margin: 12px auto;
    height: 176px;

    .close-box {
      width: 2rem;
      height: 1.5rem;
      position: absolute;
      right: 0.5rem;
      top: -1.3rem;

      div {
        width: 1rem;
        height: 1rem;
        font-size: 0.8rem;
        line-height: 1rem;
        margin: auto;
        text-align: center;
        border: 1px solid #666;
        border-radius: 50%;
      }

      li {
        width: 1px;
        height: 0.5rem;
        background: #666;
        margin: auto;
      }
    }

    .van-button--small {
      width: 11.3%;
      height: 3.5rem;
      min-width: 0;
      border-radius: 5px;
      margin: 5px 2px;
      box-shadow: 5px 5px 5px #aaa;
    }
  }
}

.allBoard {
  .van-popup {
    overflow-y: inherit;
  }

  .plate_number_box {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    background: #eaf1f9;
    position: relative;
    margin: 12px auto;
    height: 176px;

    .close-box {
      width: 2rem;
      height: 1.5rem;
      position: absolute;
      right: 0.5rem;
      top: -1.3rem;

      div {
        width: 1rem;
        height: 1rem;
        font-size: 0.8rem;
        line-height: 1rem;
        margin: auto;
        text-align: center;
        border: 1px solid #666;
        border-radius: 50%;
      }

      li {
        width: 1px;
        height: 0.5rem;
        background: #666;
        margin: auto;
      }
    }

    .van-button--small {
      width: 8.8%;
      height: 3rem;
      min-width: 0;
      border-radius: 5px;
      margin: 5px 2px;
      box-shadow: 5px 5px 5px #aaa;
    }

    .van-button--small:nth-child(1) {
      margin-bottom: 5px;
    }

    .van-button--small:nth-child(21) {
      // margin-left: 5%;
    }

    .van-button--small:nth-child(30) {
      // margin-left: 10%;
    }

    .van-button--small:last-child {
      width: 13%;
    }
  }
}
</style>
<style lang="less">
.displayNone {
  display: none !important;
}
</style>
